<template>
  <div class="card-container">
    <a-form
      style="background: #ffffff; padding-top: 1%; width: 99%"
      layout="inline"
      @keyup.enter.native="searchQuery"
    >
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="全部:" prop="keywords">
            <a-input
              placeholder="工单编号/短码/设备名称/品牌/型号/故障说明"
              v-model="queryParam.keywords"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="工单范围:" prop="fw">
            <a-select
              :size="'default'"
              :showArrow="true"
              v-model="queryParam.fw"
              placeholder="请选择工单范围"
            >
              <a-select-option key="0" value="0"> 我的 </a-select-option>
              <a-select-option key="1" value="1"> 所有的 </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="工单来源:" prop="workOrderSource">
            <a-select
              :size="'default'"
              :showArrow="true"
              v-model="queryParam.workOrderSource"
              placeholder="请选择工单来源"
            >
              <a-select-option
                v-for="item in this.$sysDictOptions('workOrderSource')"
                :key="item.k"
                :value="item.k"
              >
                {{ item.v }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item label="逾期类型:" prop="overdueType">
            <a-select
              :size="'default'"
              :showArrow="true"
              v-model="queryParam.overdueType"
              placeholder="请选择逾期类型"
            >
              <a-select-option
                v-for="item in this.$sysDictOptions('overdueType')"
                :key="item.k"
                :value="item.k"
              >
                {{ item.v }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="保修状态:" prop="repairState">
            <a-select
              :size="'default'"
              :showArrow="true"
              v-model="queryParam.repairState"
              placeholder="请选择保修状态"
            >
              <a-select-option
                v-for="item in this.$sysDictOptions('repair_state')"
                :key="item.k"
                :value="item.k"
              >
                {{ item.v }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="报修方式:" prop="repairReportingMethod">
            <a-select
              :size="'default'"
              :showArrow="true"
              v-model="queryParam.repairReportingMethod"
              placeholder="请选择报修方式"
            >
              <a-select-option
                v-for="item in this.$sysDictOptions('repairReportingMethod')"
                :key="item.k"
                :value="item.k"
              >
                {{ item.v }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="工单类型:" prop="workOrderType">
            <a-select
              :size="'default'"
              :showArrow="true"
              v-model="queryParam.workOrderType"
              placeholder="请选择工单类型"
            >
              <a-select-option
                v-for="item in this.$sysDictOptions('workOrderType')"
                :key="item.k"
                :value="item.k"
              >
                {{ item.v }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item label="维修方式:" prop="maintenanceMethod">
            <a-select
              :size="'default'"
              :showArrow="true"
              v-model="queryParam.maintenanceMethod"
              placeholder="请选择维修方式"
            >
              <a-select-option
                v-for="item in this.$sysDictOptions('maintenanceMethod')"
                :key="item.k"
                :value="item.k"
              >
                {{ item.v }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="内修/外修:" prop="internalExternalRepair">
            <a-select
              :size="'default'"
              :showArrow="true"
              v-model="queryParam.internalExternalRepair"
              placeholder="请选择内修/外修"
            >
              <a-select-option
                v-for="item in this.$sysDictOptions('internalExternalRepair')"
                :key="item.k"
                :value="item.k"
              >
                {{ item.v }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="紧急度:" prop="urgency">
            <a-select
              :size="'default'"
              :showArrow="true"
              v-model="queryParam.urgency"
              placeholder="请选择紧急度"
            >
              <a-select-option
                v-for="item in this.$sysDictOptions('urgency')"
                :key="item.k"
                :value="item.k"
              >
                {{ item.v }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="故障现象:" prop="faultPhenomenon">
            <a-tree-select
              v-model:value="queryParam.faultPhenomenon"
              :tree-data="faultPhenomenonTree"
              tree-checkable
              :treeCheckStrictly="true"
              allow-clear
              placeholder="请选择故障现象"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-if="toggleSearchStatus">
        <a-col :span="6">
          <a-form-item label="维修结果:" prop="repairResults">
            <a-select
              :size="'default'"
              :showArrow="true"
              v-model="queryParam.repairResults"
              placeholder="请选择维修结果"
            >
              <a-select-option
                v-for="item in this.$sysDictOptions('repairResults')"
                :key="item.k"
                :value="item.k"
              >
                {{ item.v }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="维修费用:" prop="amountTotal">
            <div class="input-group">
              <a-input
                v-model="queryParam.amountTotalMin"
                placeholder="请输入最小值"
                style="flex: 1; width: 67px"
              />
              <span style="line-height: 32px">-</span>
              <a-input
                v-model="queryParam.amountTotalMax"
                placeholder="请输入最大值"
                style="flex: 1; width: 67px"
              />
            </div>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="关联设备:" prop="urgency">
            <a-select
              :size="'default'"
              :showArrow="true"
              v-model="queryParam.associatedDevices"
              placeholder="请选择关联设备"
            >
              <a-select-option
                v-for="item in this.$sysDictOptions('whetherFlag')"
                :key="item.k"
                :value="item.k"
              >
                {{ item.v }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="专业分类:" prop="professionalClassificationId">
            <a-tree-select
              v-model:value="queryParam.professionalClassificationId"
              :tree-data="professionalClassificationIdTree"
              tree-checkable
              :treeCheckStrictly="true"
              allow-clear
              placeholder="请选择专业分类"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-if="toggleSearchStatus">
        <a-col :span="6">
          <a-form-item label="类型:" prop="deviceType">
            <a-tree-select
              v-model:value="queryParam.deviceType"
              :tree-data="deviceTypeTree"
              tree-checkable
              :treeCheckStrictly="true"
              allow-clear
              placeholder="请选择类型"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="故障原因:" prop="reasonMalfunction">
            <a-tree-select
              v-model:value="queryParam.reasonMalfunction"
              :tree-data="reasonMalfunctionTree"
              tree-checkable
              :treeCheckStrictly="true"
              allow-clear
              placeholder="请选择故障原因"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="暂停原因:" prop="reasonSuspension">
            <a-select
              :size="'default'"
              :showArrow="true"
              v-model="queryParam.reasonSuspension"
              placeholder="请选择暂停原因"
            >
              <a-select-option
                v-for="item in this.$sysDictOptions('reasonSuspension')"
                :key="item.k"
                :value="item.k"
              >
                {{ item.v }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="关闭原因:" prop="shutdownReason">
            <a-select
              :size="'default'"
              :showArrow="true"
              v-model="queryParam.shutdownReason"
              placeholder="请选择关闭原因"
            >
              <a-select-option
                v-for="item in this.$sysDictOptions('shutdownReason')"
                :key="item.k"
                :value="item.k"
              >
                {{ item.v }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24" v-if="toggleSearchStatus">
        <a-col :span="6">
          <a-form-item label="所属科室:" prop="departmentId">
            <a-tree-select
              v-model="queryParam.departmentId"
              tree-checkable
              :treeCheckStrictly="true"
              allow-clear
              :tree-data="departmentTree"
              placeholder="请选择所属科室"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="报修科室:" prop="repairDepartmentId">
            <a-tree-select
              v-model="queryParam.repairDepartmentId"
              tree-checkable
              :treeCheckStrictly="true"
              allow-clear
              :tree-data="departmentTree"
              placeholder="请选择报修科室"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="报修位置:" prop="repairLocation">
            <a-cascader
              v-model="queryParam.repairLocation"
              :options="campusBuildingFloorRoomTree"
              :change-on-select="false"
              expand-trigger="click"
              placeholder="请选择当前位置"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="报修人:" prop="repairerId">
            <a-select
              :size="'default'"
              :showArrow="true"
              v-model="queryParam.repairerId"
              placeholder="请选择报修人"
            >
              <a-select-option
                v-for="item in createByList"
                :key="item.companyId"
                :value="item.companyId"
              >
                {{ item.companyName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-if="toggleSearchStatus">
        <a-col :span="6">
          <a-form-item label="内/外修负责人:" prop="internalMaintenanceManager">
            <a-select
              :size="'default'"
              :showArrow="true"
              v-model="queryParam.internalMaintenanceManager"
              placeholder="请选择内/外修负责人"
            >
              <a-select-option
                v-for="item in createByList"
                :key="item.companyId"
                :value="item.companyId"
              >
                {{ item.companyName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="报修日期:" prop="startCreateTime">
            <div class="date-range-container">
              <a-range-picker
                v-model="queryParam.createTime"
                format="YYYY-MM-DD"
                @change="createTimeChange"
              />
            </div>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="完修日期:" prop="startCreateTime">
            <div class="date-range-container">
              <a-range-picker
                v-model="queryParam.completionTime"
                format="YYYY-MM-DD"
                @change="completionTimeChange"
              />
            </div>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="资产编码:" prop="assetCode">
            <a-input
              v-model="queryParam.assetCode"
              placeholder="请输入资产编码"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-if="toggleSearchStatus">
        <a-col :span="6">
          <a-form-item label="序列号:" prop="serialNumber">
            <a-input
              v-model="queryParam.serialNumber"
              placeholder="请输入序列号"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <!-- 底部查询按钮 -->
      <div class="form-footer">
        <a @click="handleToggleSearch" style="line-height: 35px">
          {{ toggleSearchStatus ? '收起' : '更多条件' }}
          <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
        </a>
        <a-button
          type="primary"
          @click="$refs.table.refresh(true)"
          style="width: 65px; height: 30px; padding-left: 17px"
        >
          查询</a-button
        >
        <a-button
          @click="
            () => {
              this.$objToReset(queryParam), $refs.table.refresh(true)
            }
          "
          style="
            margin-left: 8px;
            width: 65px;
            height: 30px;
            padding-left: 17px;
          "
          >重置</a-button
        >
      </div>
    </a-form>
    <a-tabs
      type="card"
      v-model="activeKey"
      @change="handleTabClick"
      style="
        padding-top: 3px;
        margin-left: -1px;
        width: 80%;
        position: relative;
      "
    >
      <a-tab-pane
        v-for="item in workOrderStatusList"
        :key="item.key"
        :tab="item.value"
      ></a-tab-pane>
    </a-tabs>

    <div class="table-page-search-wrapper">
      <a-button
        @click="handleAdd"
        style="margin: 10px; width: 80px; font-size: 13px; height: 30px"
        type="primary"
        size="small"
        >新增工单</a-button
      >
      <a-button
        v-if="activeKey == '0' || activeKey == '1' || activeKey == '-1'"
        style="margin: 10px; width: 80px; font-size: 13px; height: 30px"
        type="primary"
        :disabled="this.selectedRowKeys.length <= 0"
        @click="handleDispatch('0')"
        size="small"
        >派单</a-button
      >
      <a-button
        v-if="activeKey == '1' || activeKey == '-1'"
        style="margin: 10px; width: 80px; font-size: 13px; height: 30px"
        type="primary"
        size="small"
        :disabled="this.selectedRowKeys.length <= 0"
        @click="handleReceivingOrder()"
        >接单</a-button
      >
      <a-button
        v-if="activeKey == '2' || activeKey == '-1'"
        style="margin: 10px; width: 80px; font-size: 13px; height: 30px"
        type="primary"
        size="small"
        @click="handleStopOrder()"
        :disabled="this.selectedRowKeys.length <= 0"
        >暂停</a-button
      >
      <a-button
        v-if="
          activeKey == '0' ||
          activeKey == '1' ||
          activeKey == '2' ||
          activeKey == '3' ||
          activeKey == '-1'
        "
        style="margin: 10px; width: 80px; font-size: 13px; height: 30px"
        type="primary"
        size="small"
        @click="handleClose()"
        :disabled="this.selectedRowKeys.length <= 0"
        >关闭</a-button
      >
      <a-button
        v-if="activeKey == '0' || activeKey == '1' || activeKey == '-1'"
        style="margin: 10px; width: 80px; font-size: 13px; height: 30px"
        type="primary"
        size="small"
        @click="handleWithdrawal()"
        :disabled="this.selectedRowKeys.length <= 0"
        >撤回</a-button
      >
      <a-button
        v-if="activeKey == '-1' || activeKey == '4'"
        style="margin: 10px; width: 80px; font-size: 13px; height: 30px"
        type="primary"
        size="small"
        :disabled="this.selectedRowKeys.length <= 0"
        @click="handleCheckAccept()"
        >验收</a-button
      >
      <a-button
        style="
          margin: 10px;
          width: 80px;
          font-size: 13px;
          height: 30px;
          background-color: #f56c6c;
          color: #fff;
          border-color: #f56c6c;
        "
        type="primary"
        size="small"
        @click="handleDelete()"
        :disabled="this.selectedRowKeys.length <= 0"
        >删除</a-button
      >

      <div style="height: 30px; margin-left: 16px">
        <span style="margin: 0px 14px">
          非常紧急<a-icon
            type="flag"
            theme="filled"
            style="
              color: grey;
              margin-left: 5px;
              font-size: 15px;
              color: rgb(217, 30, 6);
            "
          />
        </span>
        <span style="margin: 0px 14px">
          紧急<a-icon
            type="flag"
            theme="filled"
            style="
              color: grey;
              margin-left: 5px;
              font-size: 15px;
              color: rgb(255, 153, 3);
            "
          />
        </span>
      </div>
      <s-table
        ref="table"
        rowKey="id"
        size="middle"
        :scroll="{ x: 3000 }"
        :columns="columns"
        :alert="options.alert"
        :row-selection="options.rowSelection"
        :data="loadData"
      >
        <template slot="workOrderNumber" slot-scope="text, record">
          <a @click="handleEdit(record)">{{ text }}</a>
          <a-icon
            v-if="record.urgency == '0'"
            type="flag"
            theme="filled"
            style="
              color: grey;
              margin-left: 5px;
              font-size: 15px;
              color: rgb(217, 30, 6);
            "
          />
          <a-icon
            v-if="record.urgency == '1'"
            type="flag"
            theme="filled"
            style="
              color: grey;
              margin-left: 5px;
              font-size: 15px;
              color: rgb(255, 153, 3);
            "
          />
        </template>

        <template slot="action" slot-scope="text, record">
          <a-popconfirm
            title="确定删除吗?"
            @confirm="() => handleDelete(record.id)"
            v-wx-role="120103"
          >
            <a>删除</a>
          </a-popconfirm>
        </template>
      </s-table>

      <dev-maintenance-add
        ref="modalRef"
        @ok="modalEditOk"
      ></dev-maintenance-add>
      <dev-maintenance-edit
        ref="modalEdit"
        @ok="modalEditOk"
        @close="modalEditOk"
      ></dev-maintenance-edit>
      <dev-maintenance-view ref="modalView"></dev-maintenance-view>

      <!-- 派单/转派 -->
      <dispatch-form ref="dispatchFormRef" @close="ok" />
      <!-- 暂停工单 -->
      <stop-order-form ref="stopOrderFormRef" @close="ok" />
      <!-- 关闭工单 -->
      <close-form ref="closeFormRef" @close="ok" />
      <!-- 撤回工单 -->
      <withdrawal-form ref="withdrawalFormRef" @close="ok" />
      <!-- 验收工单 -->
      <check-accept-form ref="checkAcceptFormRef" @close="ok" />
    </div>
  </div>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { deleteAction, postAction, fileAction, getAction } from '@/api/manage'
import { mixin } from '@/utils/mixin'
import DevMaintenanceEdit from './DevMaintenanceEdit'
import DevMaintenanceAdd from './DevMaintenanceAdd'
import DevMaintenanceView from './DevMaintenanceView'
import { getCompanyList, getDepartTree } from '@/api/api'
import DispatchForm from './components/DispatchForm.vue'
import StopOrderForm from './components/StopOrderForm.vue'
import CloseForm from './components/CloseForm.vue'
import WithdrawalForm from './components/WithdrawalForm.vue'
import CheckAcceptForm from './components/CheckAcceptForm.vue'
export default {
  name: 'DevContractList',
  mixins: [mixin],
  components: {
    STable,
    Ellipsis,
    DevMaintenanceEdit,
    DevMaintenanceView,
    DevMaintenanceAdd,
    DispatchForm,
    StopOrderForm,
    CloseForm,
    WithdrawalForm,
    CheckAcceptForm,
  },
  data() {
    return {
      campusBuildingFloorRoomTree: [],
      departmentTree: [],
      reasonMalfunctionTree: [],
      professionalClassificationIdTree: [],
      deviceTypeTree: [],
      createByList: [],
      faultPhenomenonTree: [],
      toggleSearchStatus: false,
      activeKey: '-1',
      visible: false,
      // 查询条件
      queryParam: {
        keywords: undefined,
        fw: undefined,
        workOrderSource: undefined,
        overdueType: undefined,
        repairState: undefined,
        repairReportingMethod: undefined,
        workOrderType: undefined,
        maintenanceMethod: undefined,
        internalExternalRepair: undefined,
        urgency: undefined,
        faultPhenomenon: undefined,
        repairResults: undefined,
        amountTotalMin: undefined,
        amountTotalMax: undefined,
        associatedDevices: undefined,
        professionalClassificationId: undefined,
        deviceType: undefined,
        reasonMalfunction: undefined,
        reasonSuspension: undefined,
        shutdownReason: undefined,
        departmentId: undefined,
        repairDepartmentId: undefined,
        repairLocation: undefined,
        repairerId: undefined,
        internalMaintenanceManager: undefined,
        startCreateTime: undefined,
        endCreateTime: undefined,
        startCompletionTime: undefined,
        endCompletionTime: undefined,
        assetCode: undefined,
        serialNumber: undefined,
      },
      // 表头
      // 如果需要字典，那么需要在columns列中加入 customRender: (text) => this.$sysDictFilter(text, 'xxxx')xxxx 为dataIndex
      columns: [
        {
          title: '工单编号',
          dataIndex: 'workOrderNumber',
          width: 140,
          fixed: 'left',
          scopedSlots: { customRender: 'workOrderNumber' },
        },
        {
          title: '工单类型',
          dataIndex: 'workOrderType',
          customRender: (text) => this.$sysDictFilter(text, 'workOrderType'),
          fixed: 'left',
          width: 100,
        },
        {
          title: '设备名称',
          dataIndex: 'deviceName',
          fixed: 'left',
          width: 100,
        },
        {
          title: '保修状态',
          dataIndex: 'repairState',
          customRender: (text) => this.$sysDictFilter(text, 'repair_state'),
        },
        {
          title: '维修结果',
          dataIndex: 'repairResults',
          customRender: (text) => this.$sysDictFilter(text, 'repairResults'),
        },
        {
          title: '品牌',
          dataIndex: 'bind',
        },
        {
          title: '型号',
          dataIndex: 'model',
        },
        {
          title: '故障说明',
          dataIndex: 'faultDescription',
        },
        {
          title: '所属科室',
          dataIndex: 'departmentId',
          customRender: (text) => this.getDepartmentId(text),
        },
        {
          title: '报修科室',
          dataIndex: 'repairDepartmentId',
          customRender: (text) => this.getDepartmentId(text),
        },
        {
          title: '报修位置',
          dataIndex: 'repairLocations',
          customRender: (text) => this.getRepairLocation(text),
        },
        {
          title: '报修详细位置',
          dataIndex: 'repairAddress',
        },
        {
          title: '报修人',
          dataIndex: 'repairerId',
          customRender: (text) => this.getCreateByName(text),
        },
        {
          title: '负责人',
          dataIndex: 'internalMaintenanceManager',
          customRender: (text) => this.getCreateByName(text),
        },
        {
          title: '维修费用',
          dataIndex: 'amountTotal ',
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
        },
        {
          title: '报修时间',
          dataIndex: 'createTime',
        },
        {
          title: '派单时间',
          dataIndex: 'dispatchTime',
        },
        {
          title: '接修时间',
          dataIndex: 'repairTime',
        },
        {
          title: '完修时间',
          dataIndex: 'completionTime',
        },
        {
          title: '响应时长',
          dataIndex: 'responseTime',
        },
        {
          title: '维修时长',
          dataIndex: 'maintenanceDuration',
        },
        {
          title: '维修周期',
          dataIndex: 'maintenanceCycle',
        },
        {
          title: '评价内容',
          dataIndex: 'evaluationContent',
        },
        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   align: 'center',
        //   fixed: 'right',
        //   scopedSlots: { customRender: 'action' },
        // },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        console.log('loadData.parameter', parameter)

        //故障现象
        if (this.queryParam.faultPhenomenon) {
          this.queryParam.faultPhenomenons = JSON.stringify(
            this.queryParam.faultPhenomenon
          )
        }
        //专业分类
        if (this.queryParam.professionalClassificationId) {
          this.queryParam.professionalClassificationIds = JSON.stringify(
            this.queryParam.professionalClassificationId
          )
        }
        //类型
        if (this.queryParam.deviceType) {
          this.queryParam.deviceTypes = JSON.stringify(
            this.queryParam.deviceType
          )
        }

        //故障原因
        if (this.queryParam.reasonMalfunction) {
          this.queryParam.reasonMalfunctions = JSON.stringify(
            this.queryParam.reasonMalfunction
          )
        }

        //所属科室
        if (this.queryParam.departmentId) {
          this.queryParam.departmentIds = JSON.stringify(
            this.queryParam.departmentId
          )
        }

        //保修科室
        if (this.queryParam.repairDepartmentId) {
          this.queryParam.repairDepartmentIds = JSON.stringify(
            this.queryParam.repairDepartmentId
          )
        }
        //报修位置
        if (this.queryParam.repairLocation) {
          this.queryParam.repairLocations = this.queryParam.repairLocation + ''
        }
        return postAction(
          this.url.list,
          Object.assign(parameter, this.queryParam)
        ).then((res) => {
          this.getworkOrderStatusList()

          return res.result
        })
      },
      selectedRowKeys: [],
      options: {
        alert: {
          clear: () => {
            this.selectedRowKeys = []
          },
        },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange,
          type: 'checkbox',
        },
      },
      workOrderStatusList: [],
      contractClassification: '2',
      url: {
        list: '/system/devMaintenance/list',
        delete: '/system/devMaintenance/delete',
        getworkOrderStatusList: '/system/devMaintenance/workOrderStatusList',
        getprofessionalClassificationIdTree:
          '/system/devProfessionalClassification/tree',
        getDeviceTypeTree: '/system/ktree/tree',
        getFaultPhenomenonTree: '/system/devMaintenanceFaultPhenomenon/tree',
        getReasonMalfunctionTree:
          '/system/devMaintenanceReasonMalfunction/tree',
        getCampusBuildingFloorRoomTree:
          '/system/devCampusBuildingFloorRoom/listTree',
      },

      workOrderStatusList: [],
    }
  },
  created() {
    this.getworkOrderStatusList()
    this.getUserList()
    this.getprofessionalClassificationId()
    this.getDepartment()
    this.getDeviceType()
    this.getFaultPhenomenon()
    this.getReasonMalfunction()
    this.getCampusBuildingFloorRoom()
  },
  computed: {},
  methods: {
    //验收工单
    handleCheckAccept() {
      this.$nextTick(() => {
        var ids = this.selectedRowKeys.join(',')
        this.$refs.checkAcceptFormRef.handleCheckAccept(ids)
      })
    },
    //撤回工单
    handleWithdrawal() {
      this.$nextTick(() => {
        var ids = this.selectedRowKeys.join(',')
        this.$refs.withdrawalFormRef.handleWithdrawal(ids)
      })
    },
    //关闭工单
    handleClose() {
      this.$nextTick(() => {
        var ids = this.selectedRowKeys.join(',')
        this.$refs.closeFormRef.handleClose(ids)
      })
    },
    //暂停工单
    handleStopOrder() {
      this.$nextTick(() => {
        var ids = this.selectedRowKeys.join(',')
        this.$refs.stopOrderFormRef.handleStopOrder(ids)
      })
    },
    //接单
    handleReceivingOrder() {
      var ids = this.selectedRowKeys.join(',')
      var receivingOrder = {
        ids: ids,
        workOrderStatus: '2',
      }
      var that = this
      this.$confirm({
        title: '确认接修?',
        content:
          '接修后，你将成为维修负责人，并可以填写维修信息、维修结果等信息',
        onOk: function () {
          postAction(that.url.update, receivingOrder).then((resp) => {
            that.$message.success('接修成功')
            that.ok()
          })
        },
      })
    },
    //START 派单
    handleDispatch(dispatchType) {
      this.$nextTick(() => {
        var ids = this.selectedRowKeys.join(',')
        this.$refs.dispatchFormRef.handleDispatch(dispatchType, ids)
      })
    },
    //EDN 派单
    ok() {
      this.$refs.table.refresh(true)
    },
    //科室值翻译
    getDepartmentId(text) {
      if (text) {
        var names = ''
        var usingDepartmentList = text.split(',')
        usingDepartmentList.forEach((usingDepartmentId) => {
          var value = this.getFindNodeByKey(
            this.departmentTree,
            usingDepartmentId
          )
          if (value) {
            names = names + value.title + ','
          }
        })
        if (names) {
          names = names.substring(0, names.length - 1)
        }

        return names
      }
    },
    //位置
    getRepairLocation(text) {
      if (text) {
        var names = ''
        var repairLocationList = text.split(',')
        console.log('repairLocationList>>>', repairLocationList)
        repairLocationList.forEach((repairLocation) => {
          var value = this.getFindNodeByKey(
            this.campusBuildingFloorRoomTree,
            repairLocation
          )
          if (value) {
            names = names + value.label + '/'
          }
        })
        if (names) {
          names = names.substring(0, names.length - 1)
        }

        return names
      }
    },
    getFindNodeByKey(tree, key) {
      for (let i = 0; i < tree.length; i++) {
        if (tree[i].value === key) {
          return tree[i] // 找到匹配项，返回该节点
        } else if (tree[i].children) {
          // 递归搜索子节点
          const found = this.getFindNodeByKey(tree[i].children, key)
          if (found) return found // 如果在子节点中找到，返回该节点
        }
      }
      return null // 未找到匹配项
    },
    //位置
    getCampusBuildingFloorRoom() {
      getAction(this.url.getCampusBuildingFloorRoomTree).then((res) => {
        this.campusBuildingFloorRoomTree = res.result.data
      })
    },
    //故障原因
    getReasonMalfunction() {
      getAction(this.url.getReasonMalfunctionTree, {}).then((res) => {
        this.reasonMalfunctionTree = res.result.data
      })
    },
    //故障现象
    getFaultPhenomenon() {
      getAction(this.url.getFaultPhenomenonTree, {}).then((res) => {
        this.faultPhenomenonTree = res.result.data
      })
    },
    //使用科室
    getDepartment() {
      getDepartTree().then((res) => {
        this.departmentTree = res.result.data
      })
    },
    //设备类型
    getDeviceType() {
      getAction(this.url.getDeviceTypeTree, {}).then((res) => {
        this.deviceTypeTree = res.result.data
      })
    },
    //专业分类
    getprofessionalClassificationId() {
      getAction(this.url.getprofessionalClassificationIdTree, {}).then(
        (res) => {
          this.professionalClassificationIdTree = res.result.data
        }
      )
    },
    completionTimeChange(value, dateString) {
      this.queryParam.startCompletionTime = dateString[0]
      this.queryParam.endCompletionTime = dateString[1]
    },
    createTimeChange(value, dateString) {
      this.queryParam.startCreateTime = dateString[0]
      this.queryParam.endCreateTime = dateString[1]
    },
    getUserList() {
      // 加载数据方法 必须为 Promise 对象
      var parameter = { pageNo: 1, pageSize: 1000000 }
      getCompanyList(Object.assign(parameter, this.queryParam)).then((res) => {
        this.createByList = res.result.data.records
        console.log('createByList>>', res.result.data.records)
      })
    },
    getCreateByName(text) {
      var obj = this.createByList.filter((aa) => aa.companyId == text)[0]
      if (obj == null) {
        if (text) {
          return '系统管理员'
        }
        return '--'
      }
      return obj.companyName
    },
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus
    },
    //重置
    reset() {
      this.$objToReset(this.queryParam)
      this.$refs.table.refresh(true)
    },

    //数量统计
    getworkOrderStatusList() {
      postAction(this.url.getworkOrderStatusList, this.queryParam).then(
        (res) => {
          this.$nextTick(() => {
            this.workOrderStatusList = res.result.data
          })
        }
      )
    },
    handleTabClick(key) {
      if (key == '-1') {
        key = ''
      }
      this.queryParam.workOrderStatus = key
      this.$refs.table.refresh(true)
      this.getworkOrderStatusList()
      console.log('Selected Tab Key:', key) // 在这里处理 key 的逻辑
      // 在此处执行自定义逻辑，例如更新状态或发送请求
    },

    onChange(value, dateString) {
      this.queryParam.signingDateList = dateString
    },
    // 删除
    handleDelete() {
      // 如果没有传入，那么批量删除
      var ids = this.selectedRowKeys.join(',')
      var that = this
      this.$confirm({
        title: '确认删除',
        content: '确定要删除当前选中维修记录吗?',
        onOk: function () {
          deleteAction(that.url.delete, { ids: ids }).then((resp) => {
            that.$message.success('删除成功')
            that.ok()
          })
        },
      })
    },
    //新增工单
    handleAdd() {
      this.$refs.modalRef.add()
    },
    // 用户编辑
    handleEdit(record) {
      this.$refs.modalEdit.edit(record)
    },
    searchQuery() {
      this.$refs.table.refresh(true)
    },
    // 保存刷新
    modalEditOk() {
      this.$refs.table.refresh()
      this.getworkOrderStatusList()
    },

    //开启选择
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
  },
  watch: {},
}
</script>
<style>
.card-container {
  background: #f5f5f5;
  padding: 0px 15px;
}

.card-container > .ant-tabs-card > .ant-tabs-content {
  margin-top: -16px;
}

/* .card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  background: #fff;
  padding: 16px;
} */
.table-page-search-wrapper {
  background: #fff;
}

.card-container > .ant-tabs-card > .ant-tabs-bar {
  border-color: #f5f5f5;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  border-color: transparent;
  background: transparent;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  border-color: #fff;
  background: #fff;
}

.input-group {
  display: flex;
  gap: 10px;
}

.date-range-container {
  display: flex;
  gap: 8px;
}

.date-range-container .ant-picker {
  flex: 1;
}

.form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}
</style>
<style scoped>
.ant-form-item {
  width: 100% !important;
  margin-bottom: 8px !important;
}

.ant-form-item >>> .ant-form-item-label {
  width: 80px;
}

.ant-form-item >>> .ant-form-item-control-wrapper {
  width: calc(100% - 80px);
}

.ant-tabs >>> .ant-tabs-tab {
  font-size: 16px !important;
}
</style>
